const BookTable = {
    name: 'BookTable',
    template: `
      <el-table :data="books" style="width: 100%">
        <!-- Book Title Column -->
        <el-table-column label="书名" width="180">
          <template #default="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>

        <!-- Author Column -->
        <el-table-column label="作者" width="180">
          <template #default="scope">
            <span>{{ scope.row.author }}</span>
          </template>
        </el-table-column>

        <!-- ISBN Column -->
        <el-table-column label="ISBN" width="180">
          <template #default="scope">
            <span>{{ scope.row.isbn }}</span>
          </template>
        </el-table-column>

        <!-- Publisher Column -->
        <el-table-column label="出版社" width="180">
          <template #default="scope">
            <span>{{ scope.row.publisher }}</span>
          </template>
        </el-table-column>

        <!-- Book Status Column with Popover -->
        <el-table-column label="状态">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <div>状态: {{ getStatusText(scope.row.status) }}</div>
              </template>
              <template #reference>
                <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>

        <!-- Book Cover Column -->
        <el-table-column label="封面">
          <template #default="scope">
            <div v-if="scope.row.coverUrl" class="preview">
              <img :src="scope.row.coverUrl" alt="封面预览" style="max-width: 50px; max-height: 50px;">
            </div>
            <div v-else>无</div>
          </template>
        </el-table-column>

        <!-- Actions Column -->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="$emit('edit', scope.row)" plain>编辑</el-button>
            <el-button size="small" type="danger" @click="$emit('delete', scope.row.bookId)" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    `,
    props: {
        books: {
            type: Array,
            default: () => [],
        }
    },
    setup() {
        const getStatusText = (status) => {
            const statusMap = {
                1: '在馆',
                2: '外借',
                3: '未上架'
            }
            return statusMap[status] || '未知'
        }

        const getStatusType = (status) => {
            switch (status) {
                case 1:
                    return'success';
                case 2:
                    return 'info';
                default:
                    return 'danger';
            }
        }

        return { getStatusText, getStatusType };
    }
};